<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<rx-layout>
            <template #middle>
				<div  class="rx-editor-box">
					<div style="width: 30%;margin:20px 0px 20px 10px" v-if="source=='dynamic'">
						<span>{{chartLangI18n('common.dataField','数据字段')}}：</span>
						<a-select @change="onChange" :getPopupContainer="p=>p.parentNode" style="width: 100%;" allowClear>
							<a-select-option v-for="(measure) in measures" :key="measure.fieldName" :value="measure.tableName+'_'+measure.fieldName">{{measure.fieldLabel}}</a-select-option>
						</a-select>
					</div>
                    <rx-ueditor-wrap style="height: 100%;width: 100%" ref="rxUeditorWrap" v-model="editorData" :baseUrl="baseUrl"></rx-ueditor-wrap>
				</div>
			</template>
		</rx-layout>
	</rx-dialog>
</template>


<script>
import {Util,RxLayout,RxDialog,RxUeditorWrap} from "@lowcode/jpaas-base-lib";

export default {
	name: "QuillEditorDialog",
	components:{
		RxLayout,
		RxDialog,
        RxUeditorWrap
	},
	props: ['destroy',"content","measures","source"],
	data() {
		return {
			editorData: '',
            baseUrl: import.meta.env.JPAAS_BASE_URL
		}
	},
	created() {
		this.editorData=this.content || "";
	},
	methods: {
		chartLangI18n(name, text, key) {
			return this.$ti18(name, text, "chartLang", key);
		},
		handleSubmit() {
			Util.closeWindow(this, "ok",this.editorData);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
        onChange(value){
			if(!value){
				return;
			}
            this.$refs.rxUeditorWrap.getEditor().setContent("${"+value+"}",true);
		}
	},
	watch: {}
}
</script>

<style scoped>
.rx-editor-box{
	display: flex;
	flex-direction: column;
    height: 100%;
}
</style>
